<template>
	<view style="width: 100%;" :style="{'padding-bottom': `${midButton ? 48 : 0}rpx`}">
    <slot></slot>
  </view>
</template>

<script>
	export default {
		data(e) {
			return {
				midButton:false
			};
		},
		created() {
			// #ifndef APP-PLUS
			//隐藏系统菜单栏
			uni.hideTabBar();
			// #endif
			this.getDeviceInfo()
		},
		methods: {
			//判断是否完全匹配
			 getDeviceInfo() {
        uni.getSystemInfo({
          success: (res) => {
              // 判断是否为iPhone X及以上设备
              const isIPhoneXSeries = (res.model.includes('iPhone') &&
                  (res.model.includes('8') || res.model.includes('X') ||
                  res.model.includes('11') || res.model.includes('12') ||
                  res.model.includes('13') || res.model.includes('14')));
                  this.midButton = isIPhoneXSeries
              // iPhone X 及以后的设备通常会有 Home Indicator
          }
        });
      }
		}
	};
</script>

<style scoped lang="scss">
	.u-fixed-placeholder {
		box-sizing: content-box;
	}

	.u-tabbar {
		&__content {
			display: flex;
			align-items: center;
			position: relative;
			position: fixed;
			// #ifdef MP-ALIPAY
			bottom: -70rpx;
			// #endif
			// #ifndef MP-ALIPAY
			bottom: 0;
			// #endif
			left: 0;
			width: 100%;
			z-index: 998;
			box-sizing: content-box;

			&__circle__border {
				border-radius: 100%;
				width: 110rpx;
				height: 110rpx;
				top: -48rpx;
				position: absolute;
				z-index: 4;
				background-color: #ffffff;
				// 由于安卓的无能，导致只有3个tabbar item时，此css计算方式有误差
				// 故使用js计算的形式来定位，此处不注释，是因为js计算有延后，避免出现位置闪动
				left: 50%;
				transform: translateX(-50%);

				&:after {
					border-radius: 100px;
				}
			}

			&__item {
				flex: 1;
				justify-content: center;
				height: 100%;
				padding: 12rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				&__button {
					position: absolute;
					top: 10rpx;
				}

				&__text {
					color: $u-content-color;
					font-size: 26rpx;
					line-height: 28rpx;
					position: absolute;
					bottom: 12rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			&__circle {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				z-index: 10;
				height: calc(100% - 1px);

				&__button {
					width: 90rpx;
					height: 90rpx;
					border-radius: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					background-color: #ffffff;
					top: -40rpx;
					left: 50%;
					z-index: 6;
					transform: translateX(-50%);
				}
			}
		}
	}
</style>
